<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar title="网易严选">
            <template #left>
                <router-link to="/">
                    <van-icon name="wap-home-o" size="30px" color="gray" /></router-link>
            </template>
            <template #right>
                <van-icon name="search" size="30px" color="gray" />
                <van-icon name="shopping-cart-o" size="30px" style="margin-left:15px" color="gray" />
            </template>
        </van-nav-bar>
        <!-- 通知栏 -->
        <van-notice-bar left-icon="volume-o" text="关于在线客服服务时间调整通知" style="margin-bottom:10px" />
        <!-- 收货地址 -->
        <div style="background-color: #ccc;margin-bottom:10px">
            <div class="o_add">
                <div class="left">
                    <p class="name" style="font-size:15px;line-height: 35px">111</p>
                    <span class="default" style="font-size:12px;text-align: center;">默认</span>
                </div>
                <div class="right">
                    <p class="phone" style="font-size:15px;line-height: 35px">133****9890</p>
                    <p class="address" style="font-size:12px">天津市天津市河东区大直沽街道111</p>
                </div>
                <div style="line-height:70px">
                    <i><van-icon name="arrow" /></i>
                </div>
            </div>
        </div>
        <!-- 优惠券 -->
        <!-- <div class="add" style="background-color:aliceblue;margin-bottom:10px">
            <ul>
                <li class="line">
                    <span>暂无可用优惠券</span>
                    <span class="right">0张</span>
                    <span><van-icon name="arrow" /></span>
                </li>
                <li class="line">
                    <span>礼品卡余额</span>
                    <span class="right">¥0.00</span>
                    <span><van-icon name="arrow" /></span>
                </li>
                <li>
                    <span>余额</span>
                    <span class="right">¥0.00</span>
                    <span><van-icon name="arrow" /></span>
                </li>
            </ul>
        </div> -->
        <!-- 商品合计 -->
        <div class="add" style="background-color:aliceblue;">
            <ul>
                <li class="line">
                    <span>商品合计</span>
                    <span class="right">¥{{ OrderInfo.originalTotalAmount }}</span>
                </li>
                <li class="line">
                    <span>邮费</span>
                    <span class="right">¥0.00</span>
                </li>
                <li class="line">
                    <span>活动优惠</span>
                    <span class="right">-¥100.00</span>
                </li>
                <li class="line">
                    <span>优惠券</span>
                    <span class="right">-¥0.00</span>
                </li>
                <li>
                    <span>商品合计</span>
                    <span class="right">¥428.00</span>
                </li>
            </ul>
        </div>
        <!-- 商品展示 -->
        <van-card v-for="order in OrderInfo.detailArrayList" :num="order.skuNum" :price="order.orderPrice" desc="描述信息"
            :title="order.skuName" :key="order.skuId" :thumb="order.imgUrl" />
        <!-- 底部 -->
        <van-submit-bar :price="OrderInfo.originalTotalAmount * 100" button-text="提交订单" @submit="onSubmit" label="应付"
            text-align="left">
            <!-- <template #tip>
                <van-checkbox v-model="checked" shape="square"
                    style="display: inline-block;vertical-align:middle">
                </van-checkbox>
                <span style="vertical-align:baseline;margin-left: 5px;">我已同意《网易严选服务协议》</span>
            </template> -->
        </van-submit-bar>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'Order',
})
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { useRouter } from "vue-router";
import { reqOrder, ReqTrade } from '../../api/order'
// 使用实例对象
const router = useRouter()
const onSubmit = async () => {
    // 解构参数
    const { tradeNo, detailArrayList } = OrderInfo.value
    // 
    let params = {
        consignee: '张三',
        consigneeTel: '178****2244',
        deliveryAddress: '天津市天津市河西区大营门街道快板楼13栋',
        paymentWay: 'ONLINE',
        orderComment: '',
        orderDetailList: detailArrayList
    }
    // 提交订单
    const res = await reqOrder(tradeNo, params)
    console.log(res);
    router.push({
        name: 'Pay',
        query: {
            orderId: res.data
        }
    })
}
// 定义初识数据
const OrderInfo = ref({})
// 获取商品清单
const getShopInfo = async () => {
    const res = await ReqTrade()
    console.log(res.data);
    OrderInfo.value = res.data
    // console.log(OrderInfo)
}
onMounted(() => {
    getShopInfo()
})

</script>

<style scoped>
.o_add {
    display: flex;
    justify-content: space-between;
    margin: 0 10px;
    height: 70px;
}

.o_add .left .default {
    border: 2px solid red;
    color: red;
    border-radius: 2px;
}

.add ul li {
    line-height: 50px;
    margin-left: 15px;
    display: flex;
    justify-content: space-between;
}

.add ul .line {
    border-bottom: 2px solid #ccc;
}

.add ul li span {
    display: inline-block;
}

.add ul li .right {
    margin-right: 15px;
}
</style>